<template>
  <div>
    <!-- 三级分类 -->
     <el-card>
      <el-form :inline="true">

        <el-form-item label="一级分类">
          <el-select :disabled="scene==1" v-model="categoryStore.c1Id" @change="handler1">
            <el-option v-for="(c1 ,index) in categoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级分类" >
          <el-select :disabled="scene==1" v-model="categoryStore.c2Id" @change="handler2">
            <el-option v-for="(c2 ,index) in categoryStore.c2Arr" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="三级分类">
          <el-select :disabled="scene==1" v-model="categoryStore.c3Id">
            <el-option v-for="(c3 ,index) in categoryStore.c3Arr" :key="c3.id" :label="c3.name" :value="c3.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </el-card>
    <!-- 内容部分 -->
     <el-card style="margin: 10px  0px;">
      
     </el-card>
  </div>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
//引入小仓库
import useCategoryStore from '@/store/modules/category'
import { ElMessage } from 'element-plus';
//#region 此处是关于顶部三级分类代码
let categoryStore=useCategoryStore()
//定义card组件内容切换
let scene=ref<number>(0) //当scene=0时，显示table，是=1时：显示添加属性页面
//当下拉菜单值发生变化时触发
const handler1=()=>{
  //清空二级、三级下拉框数据
  categoryStore.c2Id=''
  categoryStore.c3Id=''
  categoryStore.c3Arr=[]
  //调用获取二级的方法
  categoryStore.getC2()
}
//清除三级分类的数据
const handler2=()=>{
  categoryStore.c3Id=''
  categoryStore.getC3()
}
//#endregion


</script>



<style scoped lang='scss'>
.el-form--inline {
  .el-form-item {
    & > .el-input, .el-cascader, .el-select, .el-date-editor, .el-autocomplete {
      width: 240px;
    }
  }
}
</style>